<!DOCTYPE html>
<html lang="en">

<head>
    <link href="${ctx}/resources/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx}/resources/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="${ctx}/resources/css/animate.min.css" rel="stylesheet">
    <link href="${ctx}/resources/css/style.min.css?v=4.1.1" rel="stylesheet">
    <link href="${ctx}/resources/css/plugins/zTree/metroStyle/metroStyle.css" rel="stylesheet">
</head>
<body class="gray-bg">

<div id="tree" class="ztree" style="padding:15px 20px;"></div>

<script src="${ctx}/resources/js/jquery.min.js"></script>
<script src="${ctx}/resources/js/plugins/pace/pace.min.js"></script>
<script src="${ctx}/resources/js/plugins/zTree/jquery.ztree.all.min.js"></script>

<script type="text/javascript">
    var tree
    var setting = {
        view: {
            selectedMulti: false,
            dblClickExpand: false
        },
        check: {
            enable: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        edit: {
            enable: false
        },
        callback: {
            onClick: treeOnClick
        }
    };
    $(document).ready(function () {
        $.ajax({
            url: "${ctx}/admin/sys/menu/treeData?extId=${extId}",
            type: 'get',
            dataType: "json",
            success: function (result) {
                if (result.success) {
                    zNodes = result.data;
                    tree = $.fn.zTree.init($("#tree"), setting, zNodes);
                }
            }
        });
    });
    function treeOnClick(event, treeId, treeNode) {
        tree.expandNode(treeNode);
    }

</script>
</body>
</html>